<template>
  <nuxt-layout name="navigation">
    <div class="interface">
      <div class="interface-head">
        <div class="title">
          <span>{{ INTERFACE?.apiName }}</span>
          <Dict dict-type="nav_api_status" :value="INTERFACE?.apiStatus"/>
        </div>
      </div>
      <div class="container interface-body">
        <el-row>
          <el-col :span="24">
            <el-page-header
                class="mg-t-20"
                @back="navigateTo('/interface')"
                title="返回"
                content="接口详情"
            />
          </el-col>
          <el-col :span="24">
            <Card title="接口介绍" margin="10px 0 0">
              <div class="editor ql-container ql-snow">
                <div v-if="INTERFACE?.apiIntroduce" class="fs-14 text-line-height" v-html="INTERFACE?.apiIntroduce"/>
              </div>
            </Card>
          </el-col>
          <el-col :span="24">
            <Card title="接口信息" margin="10px 0 0">
              <el-descriptions :column="1">
                <el-descriptions-item label="请求地址">
                  <el-link :href="INTERFACE?.apiUrl" type="primary" target="_blank">{{ INTERFACE?.apiUrl }}</el-link>
                </el-descriptions-item>
                <el-descriptions-item label="返回格式">
                  <template v-for="(item) in INTERFACE?.apiResponseType?.split(',')">
                    <Dict dict-type="nav_response_type" :value="item"/>&nbsp;
                  </template>
                </el-descriptions-item>
                <el-descriptions-item label="请求方式">
                  <template v-for="(item) in INTERFACE?.apiRequestType?.split(',')">
                    <Dict dict-type="nav_request_type" :value="item"/>&nbsp;
                  </template>
                </el-descriptions-item>
                <el-descriptions-item label="请求示例">{{ INTERFACE?.apiUrlExample }}</el-descriptions-item>
              </el-descriptions>
            </Card>
          </el-col>
          <el-col :span="24">
            <Card title="请求参数" margin="10px 0 0">
              <el-table
                  v-if="INTERFACE?.apiRequestKeyList"
                  :data="INTERFACE?.apiRequestKeyList"
                  empty-text="暂无数据"
                  :header-row-style="{
                    fontWeight: 'bold'
                  }"
                  border
              >
                <el-table-column sortable align="center" prop="requestName" label="名称"/>
                <el-table-column align="center" prop="requestRequired" label="必填">
                  <template #default="scope">
                    <Dict dict-type="sys_yes_no" :value="scope.row.requestRequired"/>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="requestType" label="类型">
                  <template #default="scope">
                    <Dict dict-type="nav_data_type" :value="scope.row.requestType"/>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="requestText" label="说明"/>
              </el-table>
            </Card>
          </el-col>
          <el-col :span="24">
            <Card title="返回示例" margin="10px 0 0">
              <div class="editor ql-container ql-snow">
                <div
                    v-if="INTERFACE?.apiResponseExample"
                    class="ql-editor"
                    v-html="INTERFACE?.apiResponseExample"
                />
              </div>
            </Card>
          </el-col>
        </el-row>
      </div>
    </div>
  </nuxt-layout>
</template>

<script setup lang="ts">
import {Response} from "~/entity/response";
import {Interface} from "~/entity/interface";
import "assets/css/quill.snow.scss";

const {apiApi} = useApi();
const INTERFACE = ref<Interface>();
const route = useRoute();
const id = ref("");
const {setting} = useStoreToRefs(useStores.setting());

useHead({
  title: "接口详情" + setting.value?.seoSeparate + setting.value?.name,
  meta: [
    {name: 'description', content: setting.value?.seoDescription},
    {name: 'keywords', content: setting.value?.seoKeywords.join(",") + ",接口详情"}
  ]
});

onBeforeMount(() => {
  if (route.params.id) {
    id.value = route.params.id.toString();
    getInterface();
  }
});

const getInterface = () => {
  apiApi.getInterface(id.value).then((res: any) => {
    const {data}: Response = res;
    if (data) {
      INTERFACE.value = data;
    } else {
      showError({statusCode: 404, statusMessage: "页面不存在"});
    }
  }).catch(() => {
    showError({statusCode: 404, statusMessage: "页面不存在"});
  });
};
</script>

<style scoped lang="scss">
.interface {
  .interface-head {
    background: url('@/assets/image/interface-bg.svg') no-repeat;
    background-size: cover;
    height: 250px;
    line-height: 250px;
    font-size: 30px;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;

    .title {
      display: flex;
      align-items: center;

      & > span {
        margin-right: 10px;
      }
    }
  }

  .interface-body {
    margin-top: 10px;
  }
}
</style>